<template>
  <div
    id="playing"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="50"
  >
    <!-- 添加了动画的电影列表 -->
    <transition-group tag="ul" name="sildeUp">
      <li class="clearfix" v-for="movies in movieList" :key="movies.id" @click="toMovie(movies.id)">
        <div class="mv_item_info">
          <!-- 电影图片 -->
          <div class="mvPic fl">
            <img v-lazy="myTools.picFix(movies.img)" alt>
          </div>
          <!-- 内容 -->
          <div class="mvContent_info">
            <div class="mvContent fl">
              <div class="mv-title clearfix textoverS">
                <div class="title fl textoverS">{{movies.nm}}</div>
                <div class="max2 fl textoverS" v-if="movies.version=='v2d imax'">
                  <img src="../assets/mv1.png" alt>
                </div>
                <div class="max3 fl textoverS" v-if="movies.version=='v3d imax'">
                  <img src="../assets/mv3.png" alt>
                </div>
                <div class="max5 fl textoverS" v-if="movies.version=='v3d'">
                  <img src="../assets/mv5.png" alt>
                </div>
              </div>
              <div class="mv-detail">
                <div class="score">
                  <span
                    v-if="movies.globalReleased && movies.sc!=0"
                    style="display:inline-block; margin-right:5px;"
                  >观众评</span>
                  <span v-if="movies.globalReleased && movies.sc!=0" class="grade">
                    {{movies.sc}}
                    <span v-if="movies.sc.toString().indexOf('.') == -1">.0</span>
                  </span>
                  <span v-if="movies.globalReleased && movies.sc==0">暂无评分</span>
                  <span v-if="!movies.globalReleased" class="grade">{{movies.wish}}</span>
                  <span v-if="!movies.globalReleased">人想看</span>
                </div>
                <div class="actor textoverS">
                  <span>主演：</span>
                  <span class="textoverS">{{movies.star}}</span>
                </div>
                <div class="show-info textoverS">{{movies.showInfo}}</div>
              </div>
            </div>
            <!-- 按钮 -->
            <div class="mvBuy fl">
              <div class="btn" v-if="movies.globalReleased">
                <span>购票</span>
              </div>
              <div class="btn" v-if="!movies.globalReleased" :style="styleObj">
                <span>预售</span>
              </div>
            </div>
          </div>
        </div>
      </li>
    </transition-group>
    <div class="more" v-if="loading==false">
      <mt-spinner type="fading-circle" color="rgb(100, 100, 100)"></mt-spinner>努力加载中...
    </div>
  </div>
</template>

<script>
export default {
  name: "playing",
  created() {
    // 首次请求的前一部分电影详情
    let sessionVal = sessionStorage.getItem("movieList");
    sessionVal = JSON.parse(sessionVal);
    // 所有上映电影的id
    let sessionMvIds = sessionStorage.getItem("movieIds");
    sessionMvIds = JSON.parse(sessionMvIds);
    // 判断session中是否已存在要请求的数据（缺一不可）
    if (sessionVal && sessionMvIds) {
      // 都存在就从session中获取数据
      this.movieList = sessionVal;
      this.allMovieIds = sessionMvIds;
      console.log("存储的正在热映：", sessionVal);
    } else {
      // 否则重新从服务器中获取

      this.axios.get("/ajax/movieOnInfoList").then(res => {
        console.log("正在热映：", res);
        this.movieList = res.data.movieList;
        // 存储请求到的数据到session中，便于页面跳转时，重新渲染页面的数据不用再次请求线上
        var val = JSON.stringify(this.movieList);
        sessionStorage.setItem("movieList", val);

        this.allMovieIds = res.data.movieIds;
        var idVal = JSON.stringify(this.allMovieIds);
        sessionStorage.setItem("movieIds", idVal);
      });
    }

    this.$store.commit("changeHT", "猪兜电影"); // 传递title名

    this.loading = false;
  },
  data() {
    return {
      movieList: [],
      styleObj: {
        background: "skyblue"
      },
      loading: false, // 无限滚动为false时，启用
      allMovieIds: [], // 所有电影的id
      selectId: [], // 要选取的电影id
      idIndex: undefined, // 从allMovieIds开始截取id的下标位置
      endIndex: 12 // 结束截取id的下标位置
    };
  },
  methods: {
    toMovie(id) {
      this.$router.push({
        name: "movie",
        params: {
          movieId: id
        }
      });
    },
    getMoreComingList() {
      // 把已渲染的电影列表的长度作为下一部分电影获取的下标
      this.idIndex = this.movieList.length;
      this.endIndex += 12;
      // 截取要下拉更新的12部电影id
      this.selectId = this.allMovieIds.slice(this.idIndex);

      // 下拉更新请求的第一部分电影详情
      this.axios
        .get("/ajax/moreComingList", {
          params: {
            token: "",
            movieIds: this.selectId.toString() // 数组要转成字符串形式
          }
        })
        .then(res => {
          console.log("下拉更新：", res);

          this.movieList = this.movieList.concat(res.data.coming);
        });
    },
    loadMore() {
      console.log("到底加载");
      this.getMoreComingList();
      // 判断所有电影是否已下拉加载完
      if (this.movieList.length >= this.allMovieIds.length) {
        this.loading = true; // 无限滚动为true，禁用
        this.idIndex = undefined;
        this.endIndex = 12;
        console.log(this.movieList.length);
      } else {
        this.loading = false; // 重新开启无限滚动
      }
    }
  }
};
</script>

<style lang="scss">
.more {
  .mint-spinner-fading-circle {
    margin: 0 auto;
  }
}
</style>
